<template>
  <div class="otc_content">
    <div
      class="content_wrapper"
      v-loading="loading"
      element-loading-background="#18191e"
      element-loading-svg-view-box="-10, -10, 50, 50"
      :element-loading-spinner="svg"
    >
      <div class="otc_left" ref="leftOtcContent" @scroll="handleScroll">
        <div
          class="otc_item"
          v-for="(item, index) in leftList"
          :key="index"
          @click="selectOtc(item, index)"
          :style="otcIndex == index ? 'border: 1px solid #f7d04c;' : ''"
        >
          <div class="item_top">
            <div class="top_left">
              <div class="left_top">
                <p class="name">{{ item.stock_name }}</p>
                <p class="type">US</p>
              </div>
              <div class="left_bottom">
                <p class="item_desc">{{ item.symbol }}</p>
              </div>
            </div>
            <div class="top_right">
              <button
                class="desc_text"
                :class="
                  otcIndex == index ? 'active_desc_text' : 'no_click_desc_text'
                "
              >
                详情
              </button>
            </div>
          </div>
          <div class="item_desc">
            <div class="desc_left add_border">
              <div class="item">
                <p class="key">市場價格</p>
                <p class="value">{{ item.market_price }}</p>
              </div>
              <div class="item add_margin">
                <p class="key">掛牌價格</p>
                <p class="value">{{ item.listing_price }}</p>
              </div>
              <div class="item add_margin">
                <p class="key">折扣或溢價</p>
                <p
                  class="value"
                  :style="
                    isPositive(item.price_change_pct)
                      ? 'color:rgb(25, 202, 124)'
                      : 'color:rgb(254, 85, 79)'
                  "
                >
                  {{ item.discount }}%
                </p>
              </div>
            </div>
            <div class="desc_left right_text">
              <div class="item">
                <p class="key">手續費</p>
                <p class="value">0.00</p>
              </div>
              <div class="item add_margin">
                <p class="key">承銷商</p>
                <p class="value">Autonomy Capital</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="otc_right">
        <div class="title_text">
          <p class="stock_type">購買</p>
          <p class="name">{{ rightOtcInfo.stock_name }}</p>
        </div>
        <div class="right_top">
          <div class="left_top">
            <p class="name">{{ rightOtcInfo.stock_name }}</p>
            <p class="type">US</p>
          </div>
          <div class="left_bottom">
            <p class="item_desc">{{ rightOtcInfo.symbol }}</p>
          </div>
        </div>
        <div class="right_list1">
          <div class="item">
            <p class="key">掛牌價格</p>
            <div class="value">
              <p class="num_text">{{ rightOtcInfo.listing_price }}</p>
            </div>
          </div>
          <div class="item item_more">
            <div class="item_top">
              <p class="key">購買張數</p>
              <div class="value">
                <div
                  class="remove"
                  @click="handleRemove"
                  :style="removeDisable ? 'cursor: not-allowed;' : ''"
                >
                  <i class="iconfont icon-jianhao"></i>
                </div>
                <input type="number" v-model="numCopies" />
                <div
                  class="add"
                  @click="handleAddNum"
                  :style="addDisable ? 'cursor: not-allowed;' : ''"
                >
                  <i class="iconfont icon-jiahao"></i>
                </div>
              </div>
            </div>
            <div class="item_bottom">
              <p
                v-for="(item, index) in leverageList"
                :key="index"
                @click="handleCalculate(item, index)"
                :style="numberIndex == index ? 'color:#589cf8' : ''"
              >
                {{ item }}
              </p>
            </div>
          </div>
          <div class="item item_more" style="flex-direction: row">
            <div class="item_top" style="width: auto">
              <p class="key">杠杆倍数</p>
            </div>
            <div class="item_bottom" style="width: auto; padding-top: 0px">
              <p
                v-for="(item, index) in leverMultiple"
                :key="index"
                @click="handleLever(item, index)"
                :style="leverIndex == index ? 'color:#589cf8' : ''"
              >
               x {{ item }}
              </p>
            </div>
          </div>
          <div class="item">
            <p class="key">餘額</p>
            <div class="value">
              <p class="num_text">{{ userInfo.available_amount }}</p>
            </div>
          </div>
        </div>
        <div class="right_list1">
          <div class="item">
            <p class="key">股票名稱</p>
            <p class="value">{{ rightOtcInfo.stock_name }}</p>
          </div>
          <div class="item">
            <p class="key">股票代碼</p>
            <p class="value">{{ rightOtcInfo.symbol }}</p>
          </div>
          <div class="item">
            <p class="key">最小購買數量</p>
            <p class="value">{{ rightOtcInfo.min_subscribe_quantity }}</p>
          </div>
          <div class="item">
            <p class="key">最大購買數量</p>
            <p class="value">{{ rightOtcInfo.max_subscribe_quantity }}</p>
          </div>
          <div class="item">
            <p class="key">承銷商</p>
            <p class="value">Autonomy Capital</p>
          </div>
          <div class="btn_content">
            <button class="type_btn" @click="handleAdd">購買</button>
          </div>
        </div>
      </div>
    </div>

    <div v-if="showPopup1028" class="mask1025">
      <div class="popup-container1025">
        <div class="popup-header1025">
          <p>订单确认</p>
          <CloseBold
            class="close-icon1025"
            style="color: #fff"
            @click="showPopup1028 = false"
          />
        </div>
        <div class="order_content">
          <i class="iconfont icon-wancheng-"></i>
          <p class="text1">订单确认</p>
          <p class="stock_name">{{ rightOtcInfo.stock_name }}</p>
          <p class="share_price">
            ${{ orderInfo.total_cost }}({{ orderInfo.subscribe_quantity }}
            <span>股</span>)
          </p>
          <div class="time-info">
            <div class="time-item firstItem">
              <span class="circle top_circle"></span>
              <p class="info_text top_text">
                預計审核時間 {{ orderInfo.estimated_review_time }}
              </p>
            </div>
            <div class="time-item">
              <span class="circle bottom_circle"></span>
              <p class="info_text bottom_text">
                預計结算時間 {{ orderInfo.estimated_settlement_time }}
              </p>
            </div>
          </div>
          <button @click="handleSeeOrder" class="order_btn">查看订单</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, watch } from "vue";
import { getOtcList, addOtcOrder } from "../../api/stock.js";
import { getStock1 } from "../../api/fund.js";
import { getUserInfo1 } from "../../api/login.js";
import bus from "../../utils/event-bus.js";
import {
  isPositive,
  convertToUSFormat,
} from "../../utils/util.js";
import { throttle } from "lodash";
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
const loading = ref(true);
const leftList = ref([]);
const rightOtcInfo = ref({});
const addOtc = ref({});
const numberIndex = ref(null);
const leverIndex = ref(0);
// const balance = ref("");
const showPopup1028 = ref(false);
const numCopies = ref("");
const leverageList = ref(["1/4", "1/2", "3/4", "全倉"]);
const leverMultiple = ref([]);
const userInfo = ref({});
const numberLever = ref(null);
const orderInfo = ref({});
const removeDisable = ref(false);
const addDisable = ref(false);
const otcIndex = ref(0);
const leftOtcContent = ref(null);
const page = ref(1);
const listLength = ref(0);
const isScrolling = ref(false);
// const lang = ref('')
watch(numCopies, (newValue, oldValue) => {
  if (newValue <= rightOtcInfo.value.min_subscribe_quantity) {
    //  等于最小值时不可再减
    removeDisable.value = true;
  } else {
    removeDisable.value = false;
  }

  if (newValue >= rightOtcInfo.value.max_subscribe_quantity) {
    //  等于最大值时不可再加
    addDisable.value = true;
  } else {
    addDisable.value = false;
  }
});
onMounted(() => {
  // 重新获取用户信息
  getUserInfo();
  getStock();
  otcList();
});
const handleScroll = throttle(() => {
  if (listLength.value == 10) {
    const container = otcContent.value;
    if (
      container.scrollTop + container.clientHeight >=
      container.scrollHeight - 50
    ) {
      if (!isScrolling.value) {
        isScrolling.value = true;
        // 使用 requestAnimationFrame 优化性能
        requestAnimationFrame(() => {
          page.value++;
          otcList();
          isScrolling.value = false;
        });
      }
    }
  }
}, 500);
const handleSeeOrder = () => {
  // console.log("查看订单通知父组件数据")
  showPopup1028.value = false;
  bus.emit("showOtcOrder");
};
// 获取杠杆倍数
const getStock = async () => {
  const res = await getStock1("lever");
  if (res.code == 200) {
    leverMultiple.value = res.data.value.leverage_multiples;
  }
};
const otcList = async () => {
  const data = {
    page: page.value,
  };
  const res = await getOtcList(data);
  if (res.code == 200) {
    loading.value = false;
    listLength.value = res.data.data ? res.data.data.length : 0;
    if (page.value == 1) {
      leftList.value = res.data.data;
      rightOtcInfo.value = res.data.data[0];
      // 购买张数赋值
      numCopies.value = res.data.data[0].min_subscribe_quantity;
    } else {
      leftList.value = leftList.value.concat(res.data.data);
    }
  }
};
const selectOtc = (item, index) => {
  otcIndex.value = index;
  rightOtcInfo.value = item;
  // 选择单个数据时所有数据进行重置
  numCopies.value = item.min_subscribe_quantity;
  numberIndex.value = null;
  leverIndex.value = null;
  numberLever.value = null;
};
const handleAdd = async () => {
  const data = {
    otc_id: rightOtcInfo.value.id,
    subscribe_price: rightOtcInfo.value.listing_price,
    subscribe_quantity: numCopies.value + "",
  };
  if (numberLever.value) {
    data.leverage = numberLever.value;
  }
  const res = await addOtcOrder(data);
  if (res.code == 200) {
    if (localStorage.getItem("lang") == "en") {
      orderInfo.value = {
        ...res.data,
        estimated_review_time: convertToUSFormat(
          res.data.estimated_review_time
        ),
        estimated_settlement_time: convertToUSFormat(
          res.data.estimated_settlement_time
        ),
      };
      console.log("orderInfo-0-----",orderInfo.value)
    }else{
      orderInfo.value =res.data
    }
    showPopup1028.value = true;
  }
};
const getUserInfo = async () => {
  const res = await getUserInfo1();
  if (res.code == 200) {
    userInfo.value = res.data;
  }
};
const handleCalculate = (item, index) => {
  numberIndex.value = index;
  // 选择张数时将下面的倍数值清空
  leverIndex.value = null;
  numberLever.value = null;
  if (index == 3) {
    numCopies.value = parseInt(
      Number(userInfo.value.available_amount) /
        Number(rightOtcInfo.value.listing_price)
    );
  } else {
    numCopies.value = parseInt(
      (Number(userInfo.value.available_amount) /
        Number(rightOtcInfo.value.listing_price)) *
        results(item)
    );
  }
};
const handleLever = (item, index) => {
  leverIndex.value = index;
  numberLever.value = Number(item);
  numCopies.value = parseInt(numCopies.value * Number(item));
};
const results = (fraction) => {
  const [num, den] = fraction.split("/").map(Number);
  return num / den;
};
const handleRemove = () => {
  if (!removeDisable.value) {
    numCopies.value--;
  }
};
const handleAddNum = () => {
  if (!addDisable.value) {
    numCopies.value++;
  }
};
</script>

<style scoped lang="less">
.otc_content {
  width: 1200px;
  margin: 0 auto;
  margin-top: 25px;
  height: calc(95% - 25px);
  min-height: calc(95% - 25px);
  display: flex;
  .mask1025 {
    .popup-container1025 {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 500px;
      border-radius: 8px;
      color: #ffffff;
      background: #21232a;
      .popup-header1025 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        border-bottom: 1px solid #3c3e47;
        .title1025 {
          margin: 0;
          font-size: 16px;
        }
      }
      .order_content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .icon-wancheng- {
          font-size: 45px;
          color: #f7d04c;
          margin: 20px 0;
        }
        .text1 {
          font-size: 16px;
        }
        .stock_name {
          margin: 20px 0;
          font-weight: 600;
          font-size: 18px;
        }
        .share_price {
          margin-bottom: 20px;
          span {
            color: #f7d04c;
          }
        }
        .time-info {
          width: 35%;
          .firstItem {
            padding-bottom: 15px;
          }
          .time-item {
            width: 100%;
            height: 45px;
            position: relative;
            border-left: 1px solid #f7d04c;
            padding-left: 15px;
            // margin-top:5px;
            .circle {
              position: absolute;
              display: inline-block;
              width: 15px;
              height: 15px;
              border: 2px solid #f7d04c;
              border-radius: 50%;
              background-color: #21232a;
            }
            .top_circle {
              left: -7.5px;
              top: 0px;
            }
            .bottom_circle {
              left: -7.5px;
              bottom: -1px;
              background-color: #f7d04c;
            }
            .info_text {
              font-size: 16px;
            }
            .top_text {
              position: absolute;
              top: -5px;
            }
            .bottom_text {
              position: absolute;
              bottom: -5px;
            }
          }
        }
        .order_btn {
          width: 50%;
          height: 40px;
          border-radius: 5px;
          background-color: #f7d04c;
          border: 1px solid #f7d04c;
          margin-top: 40px;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .content_wrapper {
    width:100%;
    height:100%;
    display:flex;
    .otc_left {
      width: 65%;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      .otc_item {
        width: 100%;
        border-radius: 10px;
        border: 1px solid #3c3e47;
        margin-bottom: 30px;
        .item_top {
          width: 100%;
          padding: 15px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          background-color: #202b2c;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
          .top_left {
            .left_top {
              display: flex;
              align-items: center;
              margin-bottom: 3px;
              .name {
                font-size: 15px;
                margin-right: 10px;
                color: #fff;
              }
              .type {
                background-color: rgba(0, 123, 255, 0.1);
                color: #007bff;
                border-radius: 3px;
                font-size: 10px;
                padding: 2px 5px;
                box-sizing: border-box;
                border: none;
                font-style: normal;
              }
            }
            .left_bottom {
              display: flex;
              align-items: center;
              .item_desc {
                color: #fff;
                opacity: 0.7;
                font-size: 14px;
                padding: 0;
              }
            }
          }
          .top_right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .desc_text {
              padding: 0 15px;
              font-size: 12px;
              border-radius: 5px;
              color: #fff;
              opacity: 0.7;
              border: none;
              cursor: pointer;
            }
            .no_click_desc_text {
              background-color: #202b2c;
            }
            .active_desc_text {
              background-color: #f7d04c;
              height: 30px;
              opacity: 1;
            }
          }
        }
        .item_desc {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 15px;
          cursor: pointer;
          .add_border {
            border-right: 1px solid #3c3e47;
            .item {
              .value {
                padding-right: 15px;
              }
            }
          }
          .right_text {
            .item {
              .key {
                padding-left: 15px;
              }
            }
          }
          .desc_left {
            width: 50%;
            .add_margin {
              margin-top: 10px;
            }
            .item {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .key {
                color: #fff;
                opacity: 0.5;
                font-size: 12px;
              }
              .value {
                color: #fff;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    .otc_right {
      flex: 1;
      margin-left: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;

      .title_text {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        cursor: pointer;
        .stock_type {
          margin-right: 5px;
          color: #27c77e;
          font-size: 20px;
        }
        .name {
          width: 70%;
          font-size: 20px;
          color: #fff;
        }
      }
      .right_top {
        width: 100%;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 10px;
        background-color: #202b2c;
        cursor: pointer;
        .left_top {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 3px;
          .name {
            font-size: 15px;
            margin-right: 10px;
            color: #fff;
          }
          .type {
            background-color: rgba(0, 123, 255, 0.1);
            color: #007bff;
            border-radius: 3px;
            font-size: 10px;
            padding: 2px 5px;
            box-sizing: border-box;
            border: none;
            font-style: normal;
          }
        }
        .left_bottom {
          width: 100%;
          display: flex;
          align-items: center;
          .item_desc {
            color: #27c77e;
            font-size: 14px;
          }
        }
      }
      .right_list1 {
        width: 100%;
        border-radius: 10px;
        padding: 15px;
        background-color: #202b2c;
        margin-bottom: 10px;
        cursor: pointer;
        .item:first-child {
          padding-top: 0;
        }
        .item {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 15px;
          .key {
            opacity: 0.7;
            color: #fff;
            font-size: 14px;
          }
          .value {
            font-weight: 700;
            color: #fff;
            font-size: 14px;
            text-align: right;
          }
        }
        .item_more {
          flex-direction: column;
          align-items: end;
          .item_top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .key {
            }
            .value {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              .remove {
                width: 30px;
                height: 25px;
                background: rgb(85, 85, 85);
                color: #c8c9cc;
                border-radius: 4px 0 0 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                .iconfont {
                  color: #fff;
                }
              }
              input {
                width: 70px;
                height: 25px;
                margin: 0 3px;
                color: #fff;
                font-size: 11px;
                text-align: center;
                background: rgb(85, 85, 85);
              }
              .add {
                width: 30px;
                height: 25px;
                background: rgb(85, 85, 85);
                color: #c8c9cc;
                border-radius: 4px 0 0 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                .iconfont {
                  color: #fff;
                }
              }
            }
          }
          .item_bottom {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-top: 15px;
            p {
              background-color: #555;
              border-radius: 3px;
              border: 1px solid #555;
              font-size: 13px;
              padding: 5px 10px;
              margin-left: 10px;
              color: #fff;
            }
          }
        }
        .btn_content {
          padding-top: 30px;
          width: 100%;
          .type_btn {
            width: 100%;
            font-size: 14px;
            background-color: #589cf8;
            color: #fff;
            border-radius: 5px;
            border: none;
            line-height: 2.5;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
